<template>
  <div>
    <ZWDrawer ref="zwRef" @close="close">
      <div class="content">
        <ZwTable ref="tableRef" class="table-box" :option="tableOption" :fetch-params="state.searchParams"
          :fetch-api="fetch()"> </ZwTable>
      </div>
    </ZWDrawer>
  </div>
</template>
<script lang="tsx" setup>
import { ref, reactive, watch } from 'vue'
import ZWDrawer from '@/components/ZWDrawer.vue'
import ZwTable from '@/components/zw/table/Table'
// import { failDetail } from '@/api/customer/clubManage/commonSea'
import { failDetail } from '@/api/customerCenter/customerSea'
import { deepCopy } from '@/utils/helper'
const emit = defineEmits(['close'])
const zwRef = ref(null)
const props = defineProps(['isopen', 'rowid', 'title'])
const tableRef = ref<HTMLElement | null>(null)
const defaultParams = {}
const isopen = ref(false)
const state = reactive({
  searchParams: deepCopy(defaultParams)
})
let tableOption = [

  {
    prop: 'line_number',
    width: 120,
    label: 'Excel行号',
    render({ row }) {
      return row?.line_number || '--'
    }
  },
  {
    prop: 'name',
    label: '姓名',
    width: 180,
    render({ row }) {
      return row?.name || '--'
    }
  },
  {
    label: '手机号',
    prop: 'mobile',
    width: 180,
    render({ row }) {
      return row?.mobile || '--'
    }
  },
  {
    prop: 'fail_reason',
    label: '失败原因',
    minWidth: 240,
    render({ row }) {
      return row?.fail_reason || '--'
    }
  },
]
const getids = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(props.rowid)
    }, 1)
  })
}
const fetch = async () => {
  const import_id = await getids()
  return [{ import_id }, failDetail]
}
const close = () => {
  emit('close')
}
watch(
  () => props.isopen,
  (val) => {
    if (val) {
      isopen.value = val
      zwRef.value.drawer = true
      zwRef.value.isShow = false
      zwRef.value.title = props.title
      zwRef.value.width = '800px'
    }
  }
)
</script>
<style scoped lang="scss">
.content {
  padding: 16px 0;
}
</style>
